<template>
  <div>
    <router-view/>
    <tabbar v-model="active" :fixed="true" v-if="!app">
      <tabbar-item to="/">
        <img slot="icon" src="../assets/img/index/service_on.png" v-if="active == 0">
        <img slot="icon" src="../assets/img/index/service.png" v-else>
        <b>服务</b>
      </tabbar-item>
      <tabbar-item to="/info">
        <img slot="icon" src="../assets/img/index/info_on.png" v-if="active == 1">
        <img slot="icon" src="../assets/img/index/info.png" v-else>
        <b>资讯</b>
      </tabbar-item>
      <tabbar-item to="/prize" show-dot>
        <img slot="icon" src="../assets/img/index/prize_on.png" v-if="active == 2">
        <img slot="icon" src="../assets/img/index/prize.png" v-else>
        <b>开奖</b>
      </tabbar-item>
      <tabbar-item to="/mine" info="8">
        <img slot="icon" src="../assets/img/index/mine_on.png" v-if="active == 3">
        <img slot="icon" src="../assets/img/index/mine.png" v-else>
        <b>我的</b>
      </tabbar-item>
    </tabbar>
  </div>
</template>

<script>
import { Tabbar, TabbarItem } from 'vant'

const paths = ['service', 'info', 'prize', 'mine']

export default {
  components: {Tabbar, TabbarItem},
  data () {
    return {
      active: 0
    }
  },
  methods: {
    setActive () {
      var active = paths.indexOf(this.$route.path.substr(1))
      if (active  == -1) {
        active = 0
      }
      this.active = active
    }
  },
  created () {
    this.setActive()
  },
  updated () {
    this.setActive()
  }
}
</script>

<style lang="scss">
  @import "../assets/css/theme";
  .van-tabbar-item--active {
    color: $color-red !important;
  }
</style>
